<template>
    <div class="status-detail">
        <el-input v-model="searchName" placeholder="请输入学号"></el-input>
        <el-button type="primary" @click="getselectStuid">查询</el-button>
        <el-table :data="tableData" border class="container_wrap">
            <el-table-column prop="id" label="id" width="50">
            </el-table-column>
            <el-table-column prop="studentid" label="学号" width="150">
            </el-table-column>
            <el-table-column prop="stuname" label="姓名" width="180"> </el-table-column>
            <el-table-column prop="money" label="贷款金额" width="180">
            </el-table-column>
            <el-table-column prop="bank" label="放款银行" width="250">
            </el-table-column>
            <el-table-column prop="create_time" :formatter="dateFormat" label="贷款时间" width="180">
            </el-table-column>
            <el-table-column prop="end_time" :formatter="dateFormat" label="预计还款时间" width="180">
            </el-table-column>
        </el-table>

        <div class="pagination">
            <Pagination :pageCount="pagiDataAll" @cpnPageJumpTo="currentChange"></Pagination>
        </div>
    </div>
</template>

<script>
import Search from "@/components/search/Search.vue";
import Pagination from "@/components/pagination";
import {
    selectLoanByStuid,
    selectallLoanInfo,
} from "@/api/request";

export default {
    name: "StatusDetail",
    components: {
        Search,
        Pagination,
    },
    created() {
        // 获取第0页学生信息
        this.getStudentMes();
    },
    data() {
        return {
            tableData: [],
            pagiDataAll: 0,
            // 设置flg，stu表示数据来源当前页面，name表示来自子组件searchname
            currentpage: "stu",
            searchName: "",
            // 弹窗
            dialogTableVisible: { value: false },
            dialogRewardVisible: { value: false },
            dialogEditVisible: { value: false },
            // punishData
            punishData: {},
            // 当前行学生信息
            stuBaseInfo: {},
        };
    },

    mounted() {
        // console.log(this.tableData);
    },
    computed: {
        getpagiDataAll() {
            return this.pagiDataAll;
        },
    },
    methods: {
        handleDelete(index, row) {
            console.log(index, row);
        },
        // 3.请求搜索id
        getselectStuid() {
            var stuid = this.searchName;
            var page = 0;
            selectLoanByStuid(stuid, page).then((res) => {
                this.pagiDataAll = res.data.pageAll;
                // console.log(res);
                let result = res.data.data;

                // 清空数组
                this.tableData.splice(0);
                this.tableData.push(...result);
            });
        },

        /**
         * 数据请求
         */
        // 1.获取学生信息和学籍信息
        getStudentMes(page = 0) {
            // 请求
            selectallLoanInfo(page).then((res) => {
                this.pagiDataAll = res.data.pageAll;
                // console.log(res);
                let result = res.data.data;

                // 过滤属性值为null的
                // this.resFilter(result);
                // 清空数组
                this.tableData.splice(0);
                this.tableData.push(...result);
            });
        },
        /**
         * 操作
         */
        // 对表格数据的日期进行格式化
        dateFormat(row, column) {
            const daterc = row[column.property];
            const timeFormat = daterc.split('T')[0]
            return timeFormat;
        },
        // 分页跳转，获取学生信息
        currentChange(item) {
            // stu页面
            if (this.currentpage === "stu") {
                this.getStudentMes(item - 1);
            }
            if (this.currentpage === "name") {
                this.getselectStuName(this.searchName, item - 1);
            }
            if (this.currentpage === "studentid") {
                this.getselectStuid(this.searchName, item - 1);
            }
        },
    },
};
</script>
<style lang='scss' scoped>
.el-input {
    width: 200px;
    margin-right: 30px;
    margin-top: 20px;
    margin-left: 30px;
}

.pagination {
    text-align: center;
    margin-top: 15px;
}

.name-wrapper {
    .el-tag {
        cursor: pointer;
    }
}
</style>